<script setup>
import {computed, ref} from "vue";

let group=ref(false)
let myre=ref(false)
let allre=ref(false)
let mail=ref(false)
const value1 = ref(0);
const currentPage = ref(1);
const itemsPerPage = ref(5);

const searchText = ref("");
let searching = ref(false);
let type = ref(["tto","ttt","too","tot"]);
const slicedItems = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = currentPage.value * itemsPerPage.value;
  return allList[value1.value].slice(startIndex, endIndex);
});
const filterItemsSlicedItems = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = currentPage.value * itemsPerPage.value;
  return filterItems.value.slice(startIndex, endIndex);
});
const filterItems = computed(() => {
  return allList[value1.value].filter((item) => {
    return type.value.includes(item.classId)&&item.name.includes(searchText.value)

  });
});
const option1 = [
  { text: 'vue3开发初体验', value: 0 },
  { text: 'vue3组件化开发', value: 1 },
  { text: 'vue3路由的使用', value: 2 },
];
const allList = [
  [
    {id:1,name:"张三",class:"22软件技术3班",score:1,classId:"ttt"},
    {id:2,name:"李四",class:"22软件技术1班",score:2,classId:"tto"},
    {id:3,name:"王五",class:"21软件技术1班",score:3,classId:"too"},
    {id:4,name:"德克萨斯",class:"22软件技术3班",score:95,classId:"ttt"},
    {id:5,name:"诺克萨斯",class:"21软件技术2班",score:80,classId:"tot"},
    {id:6,name:"四大皆空四大皆空",class:"22软件技术1班",score:90,classId:"tto"}
  ],
  [
    {id:1,name:"张三",class:"22软件技术3班",score:4,classId:"ttt"},
    {id:2,name:"李四",class:"22软件技术1班",score:5,classId:"tto"},
    {id:3,name:"王五",class:"21软件技术1班",score:6,classId:"too"},
    {id:4,name:"德克萨斯",class:"22软件技术3班",score:80,classId:"ttt"},
    {id:5,name:"诺克萨斯",class:"21软件技术2班",score:80,classId:"tot"},
    {id:6,name:"四大皆空四大皆空",class:"22软件技术1班",score:90,classId:"tto"}

  ],
  [
    {id:1,name:"张三",class:"22软件技术3班",score:7,classId:"ttt"},
    {id:2,name:"李四",class:"22软件技术1班",score:8,classId:"tto"},
    {id:3,name:"王五",class:"21软件技术1班",score:9,classId:"too"},
    {id:4,name:"德克萨斯",class:"22软件技术3班",score:80,classId:"ttt"},
    {id:5,name:"诺克萨斯",class:"21软件技术2班",score:80,classId:"tot"},
    {id:6,name:"四大皆空四大皆空",class:"22软件技术1班",score:90,classId:"tto"}
  ]
]
function changeTextToBlue(index) {
  let switchList=document.querySelectorAll(".switch")
  if (switchList[index].style.color==="blue"){
    switchList[index].style.color="black"
  }else {
    switchList[index].style.color="blue"
  }
}

function onCancel() {
  if (!type){
    searchText.value = "";
    searching.value = false;
  }
}
function onInput() {
  if (searchText.value === ""&&!type){
    searching.value=false;
  }else {
    searching.value=true;
  }
}
  function handleCommand(index) {
  value1.value = index
}
function handleCurrentChange(val) {
  currentPage.value = val;
}
</script>
<template>
  <div class="el-aside">sdsdsdsdsds</div>
  <div class="study">
    <el-row>
      <el-col :span="24" class="col menu">
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            {{ option1[value1].text }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in option1" :key="index" :command="index">{{ item.text }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

    <el-row justify="space-around">
      <el-col class="col search">
        <el-checkbox-group v-model="type" @change="onInput">
          <el-checkbox label="tto">221</el-checkbox>
          <el-checkbox label="ttt">223</el-checkbox>
          <el-checkbox label="too">211</el-checkbox>
          <el-checkbox label="tot">212</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>

    <el-row class="switchrow" justify="center">
      <el-col :span="4" id="switch1" class="col switch" @click="changeTextToBlue(0)">
        <div>小组任务</div>
        <el-switch v-model="group" />
      </el-col>
      <el-col :span="4" id="switch2" class="col switch" @click="changeTextToBlue(1)">
        <div>我反馈</div>
        <el-switch v-model="myre" />
      </el-col>

      <el-col :span="4" id="switch3" class="col switch" @click="changeTextToBlue(2)">
        <div>全部反馈</div>
        <el-switch v-model="allre" />
      </el-col>
      <el-col :span="4" id="switch4" class="col switch" @click="changeTextToBlue(3)">
        <div>发邮件</div>
        <el-switch v-model="mail" />
      </el-col>
    </el-row>
    <div class="textcontent">
      <p>任务:<span class="redtext">{{ option1[value1].text }}</span></p>
      <p>权重占比：7.5%</p>
      <p>完成截止时间：<span class="redtext">2024/03/17 23:59:59</span><el-button type="primary" size="small">退出</el-button></p>
      <p>参考官网教程，熟悉Vue3的各个知识点，使用Vue编写一个简单的todolist项目，并进行打包发布压缩上传。不能在线正常浏览网页效果者不得分！</p>
    </div>

    <el-input v-model="searchText" placeholder="请输入搜索关键词" clearable @clear="onCancel" @input="onInput">
      <template #append>
        <el-button icon="el-icon-search"></el-button>
      </template>
    </el-input>

    <el-row class="testListTitle" justify="space-around">
      <el-col class="title listItem" :span="4">学号</el-col>
      <el-col class="title listItem" :span="6">学生姓名</el-col>
      <el-col class="title listItem" :span="4">班级</el-col>
      <el-col class="title listItem" :span="4">得分</el-col>
    </el-row>

    <el-row v-if="searching" class="testListItem" v-for="item in filterItemsSlicedItems" :key="item.id" justify="space-around" :style="{ backgroundColor: item.score < 60 ? '#f5bbbb' : (item.score >= 90 ? '#b4d4b4' : '') }">
      <el-col class="listItem id" :span="4">{{ item.id }}</el-col>
      <el-col class="listItem name" :span="4">{{ item.name }}</el-col>
      <el-col class="listItem" :span="4">{{ item.class }}</el-col>
      <el-col class="listItem" :span="4">{{ item.score }}</el-col>
    </el-row>

    <el-row v-else class="testListItem" v-for="item in slicedItems" :key="item.id" justify="space-around" :style="{ backgroundColor: item.score < 60 ? '#f5bbbb' : (item.score >= 90 ? '#b4d4b4' : '') }">
      <el-col class="listItem id" :span="4">{{ item.id }}</el-col>
      <el-col class="listItem name" :span="4">{{ item.name }}</el-col>
      <el-col class="listItem" :span="4">{{ item.class }}</el-col>
      <el-col class="listItem" :span="4">{{ item.score }}</el-col>
    </el-row>

    <el-row v-if="searching" class="buttom" justify="space-around">
      <el-col :span="4" class="col">
        <div>共{{ filterItems.length }}条</div>
      </el-col>
      <el-col :span="6">
        <el-pagination
            v-model="currentPage"
            :page-size="itemsPerPage"
            :total="filterItems.length"
            :pager-count="filterItems.length % itemsPerPage === 0 ? filterItems.length / itemsPerPage : Math.floor(filterItems.length / itemsPerPage) + 1"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-row v-else class="buttom" justify="space-around">
      <el-col :span="4" class="col">
        <div>共{{ allList[value1].length }}条</div>
      </el-col>
      <el-col :span="6">
        <el-pagination
            v-model="currentPage"
            :page-size="itemsPerPage"
            :total="allList[value1].length"
            :pager-count="allList[value1].length % itemsPerPage === 0 ? allList[value1].length / itemsPerPage : Math.floor(allList[value1].length / itemsPerPage) + 1"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>

</template>
<style scoped>
.study{
  width: 90%;
  min-height: 600px;
  margin: 0 auto;
  border: 1px solid #e4e7ed;
}
*{

  margin-top: 3px;
}
.switch{
  display: flex;
  font-size: 0.8rem;
  align-items: center;
}
.search{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.textcontent{
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-left: 5px;
}
.redtext {
  color: red;
}
.switchrow{
  display: flex;
  justify-content: space-around;

}
.menu{
  margin: 0 0;
}
.testListTitle{
  width: 90%;
  height: 40px;
  border-bottom: 1px solid #ffffff;
  margin: 0 auto;
}
.testListItem{
  width: 90%;
  height: 40px;
  border-bottom: 1px solid #ffffff;
  margin: 0 auto;
  font-size: 0.9rem;
  align-items: center;
  font-family: "Microsoft YaHei";
  .id{
    color: blue;
  }
  .name {
    color: blue;
  }
  .listItem{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.buttom {
  width: 90%;
  height: 40px;
  margin-top: 10px;
  align-items: center;
}
.footer {
  height: 30px;
}
</style>
